<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../../static/public_file/js/ModalBox.js"></script>
    <link rel="stylesheet" href="../../static/personal_center/font_2369197_oqktwkt71s/iconfont.css" media="screen">
    <style>
        body, html {
            padding: 0px;
            margin: 0px;
            width: 100%;
            height: 100%;
            letter-spacing:1px;
        }
        .add_background {
            background: #A9A9A9;
        }
        .li-class {
            list-style: none;
            margin-top: 2%;
            color: #0b0b0b;
            cursor: pointer;
            height: 30px;
            line-height: 30px;
        }
        .shade {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(36, 36, 36, 0.5);
            display: none;
            z-index: 10000;
        }
        #addForm1 {
            width: 800px;
            height: 620px;
            background: #F5F5F5;
            position: absolute;
            border: #dfdfdf solid 1px;
            margin: auto;
            border-radius: 3px;
            top: 50%;
            left: 50%;
            /* 实现鼠标拖拽使用css3效果 */
            transform: translate(-50%, -50%);
            z-index: 10100;
            font-size: 0;
        }
        #title {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 10px;
            height: 50px;
            color: #0b0b0b;
            cursor: move;
            /*border: #dfdfdf solid 1px;*/
            width: 100%;background: #f4f7fa;border-top-left-radius: 5px;border-top-right-radius: 5px;
        }
        .input-style {
            display: inline-block;
            width: 95%;
            height: 35px;
            font-size: 14px;
            border: none;
            background: white;
            outline: none;
        }
        .search {
            width: 300px;
            display: flex;
            float: right;
            margin: 10px 0;
            margin-right: 1%;
            /*border: 1px solid red;*/
        }

        .search input {
            vertical-align: middle;
            float: left;
            flex: 4;
            height: 30px;
            width: 230px;
            outline: none;
            border: 1px solid #0070c1;
            box-sizing: border-box;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
        }
        .search button {
            float: right;
            flex: 1;
            height: 30px;
            width: 70px;
            line-height: 30px;
            background-color: #0070c1;
            color: white;
            border-style: none;
            outline: none;
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
        }
        .search button i {
            font-style: normal;
        }
        .search button:hover {
            font-size: 16px;
        }
        #loading { background: #fff url(../../static/public_file/images/jiazai.gif) no-repeat scroll center center; height: 100%; width: 100%; background-size: 10%; position: fixed; margin-top: 0px; top: 0px; left: 0px; bottom: 0px; overflow: hidden !important; right: 0px; z-index: 999999;background-color: rgba(255, 255, 255, 0.08);}

    </style>
</head>
<body>
    <div id="loading">
        <div id="loading-center">
        </div>
    </div>

    <div style="width: 100%;height: 100%;">
        <div style="width: 100%;height: 40px;text-align: right;border-bottom: #cfcfcf solid 1px;">
            <button style="line-height: 27px;border-radius: 3px;border: #1E90FF solid 0.5px;width: 100px;height: 30px;margin-top: 5px;background: #1E90FF;color: white;"> <a href="javascript:history.go(-1)" style="color: white;">返回</a></button>

            <button id="summit_but" onclick="summit_data()" style="width: 100px;height: 30px;line-height: 30px;margin-top: 5px;background-color: #1E90FF;color: white;border: #1E90FF solid 1px;border-radius: 3px;margin-right: 15px;">提&nbsp;&nbsp;交</button>
        </div>

        <div style="width: 100%;height: 93%;overflow: auto;background-color: white;font-size: 0;">
            <div style="width: 90%;margin-left: 5%;margin-top: 5px;">
                <table style="width: 100%;border-collapse: collapse;">
                    <tr style="width: 100%;font-size: 14px;">
                        <td style="height: 40px;text-align: center;border: #cfcfcf solid 1px;font-size: 22px;" colspan="4">
                            <b id="title_b">公务用车使用审批单</b>
                        </td>
                    </tr>
                    <tr style="width: 100%;font-size: 14px;">
                        <td style="height: 40px;border: #cfcfcf solid 1px;font-size: 14px;background-color: #F5F5F5;color: #1E90FF;padding-left: 1%;" colspan="4">
                            基本信息
                        </td>
                    </tr>
                    <tr style="width: 100%;font-size: 14px;">
                        <td style="width: 8%;height: 40px;text-align: right;padding-right: 1%;font-size: 14px;border: #cfcfcf solid 1px;border-top: none;border-right: none;">申请人：</td>
                        <td style="width: 30%;height: 40px;font-size: 14px;border: #cfcfcf solid 1px;border-top: none;border-right: none;text-align: left;padding-left: 10px;">{{ ReturnData.apply }}</td>
                        <td style="width: 8%;height: 40px;text-align: right;padding-right: 1%;font-size: 14px;border: #cfcfcf solid 1px;border-top: none;border-right: none;">申请部门：</td>
                        <td style="width: 30%;height: 40px;text-align: left;padding-left: 10px;font-size: 14px;border: #cfcfcf solid 1px;border-top: none;">{{ ReturnData.dep }}</td>
                    </tr>
                    <tr style="width: 100%;font-size: 14px;">
                        <td style="width: 8%;height: 40px;line-height: 40px;border: #cccccc solid 1px;text-align: right;padding-right: 1%;border-top: none;">申请日期：</td>
                        <td style="width: 30%;height: 40px;line-height: 40px;border: #cccccc solid 1px;border-left: none;padding-left: 10px;border-top: none;">{{ ReturnData.apply_time }}</td>
                        <td style="width: 8%;height: 40px;line-height: 40px;border: #cccccc solid 1px;text-align: right;padding-right: 1%;border-top: none;">是否补录：</td>
                        <td style="width: 30%;height: 40px;line-height: 40px;border: #cccccc solid 1px;text-align: left;padding-left: 10px;border-top: none;outline: none;">{{ ReturnData.is_fix }}</td>
                    </tr>
                    <tr style="width: 100%;font-size: 14px;">
                        <td style="height: 40px;border: #cfcfcf solid 1px;font-size: 14px;background-color: #F5F5F5;color: #1E90FF;padding-left: 1%;" colspan="4">
                            申请详情
                        </td>
                    </tr>
                    <tr style="width: 100%;font-size: 14px;">
                        <td style="width: 8%;height: 40px;line-height: 40px;border: #cccccc solid 1px;text-align: right;padding-right: 1%;border-top: none;">用车时间：</td>
                        <td style="width: 30%;height: 40px;line-height: 40px;border: #cccccc solid 1px;border-left: none;padding-left: 10px;border-top: none;">
                            <input class="input-style" type="text" name="car_start" id="car_start" value="{{ ReturnData.start_time }}">
                        </td>
                        <td style="height: 40px;line-height: 40px;border: #cccccc solid 1px;border-left: none;padding-left: 10px;border-top: none;" colspan="2">
                            <input class="input-style" type="text" name="car_end" id="car_end" value="{{ ReturnData.end_time }}">
                        </td>
                    </tr>
                    <tr style="width: 100%;font-size: 14px;">
                        <td style="width: 8%;height: 40px;line-height: 40px;border: #cccccc solid 1px;text-align: right;padding-right: 1%;border-top: none;">行程路线：</td>
                        <td style="width: 30%;height: 40px;line-height: 40px;border: #cccccc solid 1px;border-left: none;padding-left: 10px;border-top: none;outline: none;" id="itinerary" contenteditable="true" colspan="3">{{ ReturnData.Route }}</td>
                    </tr>
                    <tr style="width: 100%;font-size: 14px;">
                        <td style="width: 8%;height: 40px;line-height: 40px;border: #cccccc solid 1px;text-align: right;padding-right: 1%;border-top: none;">用车人员：</td>
                        <td style="width: 30%;height: 40px;line-height: 40px;border: #cccccc solid 1px;border-left: none;padding-left: 10px;border-top: none;outline: none;" onclick="fill_val()" contenteditable="true" colspan="3">
                            <input id="conferee" type="text" style="border: none;outline: none;width: 98%;height: 100%;" value="{{ ReturnData.use_people }}">
                        </td>
                    </tr>
                    <tr style="width: 100%;font-size: 14px;">
                        <td style="width: 8%;height: 40px;line-height: 40px;border: #cccccc solid 1px;text-align: right;padding-right: 1%;border-top: none;">用车事由：</td>
                        <td style="width: 30%;height: 40px;line-height: 40px;border: #cccccc solid 1px;border-left: none;padding-left: 10px;border-top: none;outline: none;" id="car_marks" contenteditable="true" colspan="3">{{ ReturnData.Reasons }}</td>
                    </tr>
                    <tr style="margin-left: 1%;">
                        <td style="width: 8%;height: 40px;line-height: 40px;border: #cccccc solid 1px;text-align: right;padding-right: 1%;border-top: none;font-size: 14px;">拟派车辆：</td>
                        <td style="width: 30%;height: 40px;line-height: 40px;border: #cccccc solid 1px;border-left: none;padding-left: 10px;border-top: none;outline: none;font-size: 14px;" id="vehicle_name">{{ ReturnData.vehicles }}</td>
                        <td style="width: 8%;height: 40px;line-height: 40px;border: #cccccc solid 1px;text-align: right;padding-right: 1%;border-top: none;font-size: 14px;">司机：</td>
                        <td id="driver_name" style="width: 30%;height: 40px;line-height: 40px;border: #cccccc solid 1px;text-align: left;padding-left: 10px;border-top: none;outline: none;font-size: 14px;">{{ ReturnData.drivers }}</td>
                    </tr>
                    <tr style="width: 100%;font-size: 14px;">
                        <td style="height: 40px;border: #cfcfcf solid 1px;font-size: 14px;background-color: #F5F5F5;color: #1E90FF;padding-left: 1%;" colspan="4">
                            审批详情
                        </td>
                    </tr>
                    {% if "B" in audit_dic %}
                        <tr style="width: 100%;font-size: 14px;">
                            <td style="width: 15%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;line-height: 35px;text-align: right;padding-right: 1%;">
                                分&nbsp; 管&nbsp;领&nbsp;导
                            </td>
                            <td colspan="3" style="width: 85%;height: 150px;border: #cccccc solid 1px;border-left: none;border-top: none;">
                                {% for k,v in audit_dic.items %}
                                    {% if k == 'B' %}
                                        {% for item in v %}
                                            {% if item.state != 'unaudit' %}
                                                <div style="width: 100%;line-height: 20px;position: relative;">
                                                    <span>{{ item.state_display }}</span>
                                                    <span style="margin-left: 3%">{{ item.audit_note }}</span>
                                                </div>
                                                <div>
                                                    {% if item.signature_picture %}
                                                        <img src="{{ item.signature_picture }}" alt="" style="width: 150px; height: 60px;">
                                                    {% else %}
                                                        {{ item.audit_user }}
                                                    {% endif %}
                                                </div>
                                                <div style="text-align: right;color: #0b0b0b;">{{ item.audit_time }}</div>
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                {% endfor %}
                            </td>
                        </tr>
                    {% endif %}

                    {% if "YB" in audit_dic %}
                        <tr style="width: 100%;font-size: 14px;">
                            <td style="width: 15%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;line-height: 35px;text-align: right;padding-right: 1%;">
                                车队负责人
                            </td>
                            <td colspan="3" style="width: 85%;height: 150px;border: #cccccc solid 1px;border-left: none;border-top: none;">
                                {% for k,v in audit_dic.items %}
                                    {% if k == 'YB' %}
                                        {% for item in v %}
                                            {% if item.state != 'unaudit' %}
                                                <div style="width: 100%;line-height: 20px;position: relative;">
                                                    <span>{{ item.state_display }}</span>
                                                    <span style="margin-left: 3%">{{ item.audit_note }}</span>
                                                </div>
                                                <div>
                                                    {% if item.signature_picture %}
                                                        <img src="{{ item.signature_picture }}" alt="" style="width: 150px; height: 60px;">
                                                    {% else %}
                                                        {{ item.audit_user }}
                                                    {% endif %}
                                                </div>
                                                <div style="text-align: right;color: #0b0b0b;">{{ item.audit_time }}</div>
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                {% endfor %}
                            </td>
                        </tr>
                    {% endif %}

                    {% if "CGB" in audit_dic %}
                        <tr style="width: 100%;font-size: 14px;">
                            <td style="width: 15%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;line-height: 35px;text-align: right;padding-right: 1%;">
                                车管办分管领导
                            </td>
                            <td colspan="3" style="width: 85%;height: 150px;border: #cccccc solid 1px;border-left: none;border-top: none;">
                                {% for k,v in audit_dic.items %}
                                    {% if k == 'CGB' %}
                                        {% for item in v %}
                                            {% if item.state != 'unaudit' %}
                                                <div style="width: 100%;line-height: 20px;position: relative;">
                                                    <span>{{ item.state_display }}</span>
                                                    <span style="margin-left: 3%">{{ item.audit_note }}</span>
                                                </div>
                                                <div>
                                                    {% if item.signature_picture %}
                                                        <img src="{{ item.signature_picture }}" alt="" style="width: 150px; height: 60px;">
                                                    {% else %}
                                                        {{ item.audit_user }}
                                                    {% endif %}
                                                </div>
                                                <div style="text-align: right;color: #0b0b0b;">{{ item.audit_time }}</div>
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                {% endfor %}
                            </td>
                        </tr>
                    {% endif %}
                </table>
            </div>
        </div>
    </div>

    <div id="addForm" class="shade">
        <div id="addForm1">
            <div id="title">
                <div style="width: 20%;margin-left: 1%;display: inline-block;line-height: 0px;font-size: 20px;">
                    <h5 style="margin-left: 1%;display: inline-block;font-size: 18px;">选择用车人员</h5>
                </div>

                <div class="search" style="vertical-align: center;display: inline-block;text-align: right;margin-left: 35%;font-size: 14px;">
                    <input type="text" placeholder="请输入..." name="" id="search_data" value="">
                    <button id="search_button">搜索</button>
                </div>
                <span onclick="close_models1()" style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i class="iconfont icon-quchu"></i></span>
            </div>
            <hr>
            <div style="display: inline-block;width: 30%;height: 350px;border-right: #E8E8E8 solid 1px;">
                <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 2%;color: #0b0b0b;border-bottom: #cfcfcf solid 1px;font-size: 14px;">
                    <div id="an_branch"
                         style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;color: #01aaed;">
                        按部门
                    </div>
                    <div id="an_rank"
                         style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;">按权限
                    </div>
                    <div id="an_func"
                         style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;">按职能
                    </div>
                </div>
                <div id="department_list" style="width: 100%;height: 315px;overflow: auto;">
                    <div style="width: 100%;height: 100%;text-align: center;">
                        <img style="width: 30%;height: 30%;margin-top: 35%;"
                             src="../../static/public_file/images/jiazai.gif" alt="">
                    </div>
                </div>
            </div>

            <div style="display: inline-block;width: 69.5%;height: 350px;overflow: auto;vertical-align: top;left: 0;font-size: 14px;">
                <table class="table table-hover table-bordered" style="border-collapse: collapse;margin: 0;padding: 0;width: 100%;">
                    <thead style="width: 100%;">
                        <tr style="width: 100%;">
                            <th scope="col" style="width: 10%;height: 30px;border: #dfdfdf solid 1px;">
                                <input id="all_select_checkbox" type="checkbox">
                            </th>
                            <th scope="col" style="width: 20%;height: 30px;border: #dfdfdf solid 1px;">序号</th>
                            <th scope="col" style="width: 35%;height: 30px;border: #dfdfdf solid 1px;">姓名</th>
                            <th scope="col" style="width: 35%;height: 30px;border: #dfdfdf solid 1px;">工号</th>
                        </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="t_table2"></tbody>
                </table>
                <div id="img-display1" style="width: 75%;text-align: center;">
                    <div style="margin-top: 10%;">
                        <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                        <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                    </div>
                </div>
            </div>

            <div style="height: 150px;width: 100%;border-top: #E8E8E8 solid 1px;overflow: auto;">
                <div id="checked-label" style="margin-top: 1%;margin-left: 3%;width: 90%;font-size: 14px;">

                </div>
            </div>
            <hr>
            <div style="height: 70px;padding-right: 2%;font-size: 14px;">
                <button id="model-affirm" onclick="choose_people()" style="border-radius: 3px;height: 30px;float: right;margin-top: 15px;border: #1E90FF solid 1px;background: #1E90FF;color: white;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../../static/personal_center/js/jquery.js"></script>
    <script src="../../static/administrative/layDate-v5.0.9/laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script>
        document.getElementById("loading").style.display = "none";
        date_func();

        function date_func() {
            lay('#version').html('-v' + laydate.v);
            //执行一个laydate实例
            laydate.render({
                elem: '#car_start' //指定元素
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#car_end' //指定元素
            });
        }

        let title1 = document.querySelector("#title");
        let addForm1 = document.querySelector("#addForm");
        title1.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm1.offsetLeft;
            let y = e.pageY - addForm1.offsetTop;


            document.addEventListener("mousemove", move);
            function move(e) {
                addForm1.style.left = e.pageX - x + 'px';
                addForm1.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function summit_data() {
            var VehicId = window.location.href.split("id=")[1].replace("#", "");
            var car_start = document.getElementById('car_start').value;             // 开始时间
            var car_end = document.getElementById('car_end').value;         // 结束时间
            var itinerary = document.getElementById("itinerary").innerText;         // 行程路线
            var field_leader = document.getElementById("conferee").value;
            var car_marks = document.getElementById('car_marks').innerText;             // 用车是由

            if (!field_leader) {
                alert("请选择用车人员！");
                return false
            }

            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/back-management/VehicleDetail.html", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("car_marks=" + String(car_marks) + "&start_time=" + String(car_start) + "&end_time=" + String(car_end) + "&route=" + String(itinerary) + "&VehicId=" + String(VehicId) + "&field_leader=" + String(field_leader));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200) {
                            alert("修改成功");
                            window.location.reload();
                        } else {
                            alert(JsonDate['message']);
                            document.getElementById("loading").style.display = "none";
                        }
                    }
                }
            };
        }
    </script>
</body>
</html>